The Elm Archtecture

https://miro.medium.com/max/2100/1*dZFJ9fnMH-2c3B8byqrDmw.gif https://medium.com/@l.mugnaini/the-elm-architecture-tea-animation-3efc555e8faf%5D

4つの概念

Model

アプリケーション全体の状態を表す型

Reduxでいうstore

Update

update : Msg -> Model -> Model

状態を更新する関数

reduxのreducer

Msg

アプリケーション内で起こるイベントの定義

reduxのaction

View

view : Model -> Html Msg

Reactがやってるとこ

Elmランタイムと遣り取りをする方法

Html

DOM生成してランタイムに渡す

Command

ランタイムに処理を実行させ、結果をメッセージとして受け取る

ex. HTTPリクエスト, 乱数, 現在時刻の取得

Subscription

ランタイムにイベントを監視させ、通知を受け取る

TEAはフレームワークなので、アプリケーション全体のアーキテクチャが決まるわけではない

TEAがカバーしていないところで設計ミスが起きたことがあったらしい

Modelは本来は分割しないが発表者は分割したらしい

失敗したらしい

めっちゃ複雑になったらしい

以下のようにして回避した

https://gyazo.com/8828ddca706d59bcfcf00c48e7d76405

TEAはcoreのままにして、補助用の関数を増やしていった

swift

Component設計

ここでいうComponentとは

ReactのCopmonentみたいに、各自でstateを持っているようなViewのこと

Elm文脈で言えば、各ViewがTEAを持っている

プロジェクト全体で見ればTEA構造の階層がいくつか存在する感じになっている

上の記事で言っているのは、そもそもComponentは不要で、Viewは全部関数で作ればいいやん、というもの

だからたぶんModelが1箇所のみに集まっている状態を良しとしている